<template>
  <div class="recharge">
    <div class="centre-recharge">
        <backHeader title="充值"></backHeader>
        <div class="centre-recharge-userInfo">
            <div class="go_to_home" @click="goHome">
                <img src="~images/icon/goHome.png" alt="" class="icon">首页
            </div>
            <div class="wrap">
                <div class="name_wrap">
                    <img src="~images/icon/moneyName.png" alt="" class="icon">
                    <div class="name">用户名：{{$username}}</div>
                </div>
                <div class="balance_wrap">
                    <img src="~images/icon/moneyNum.png" alt="" class="icon">
                    <div class="balance">余额：</div>
                </div>
            </div>
        </div>
        <div class="centre-recharge-monchk">
            <a class="centre-recharge-monitm disabled" v-for="(item,index) in moneyNumber" :key="index">{{item}}</a>
            <input class="centre-recharge-monitm" style="padding-left:16px" placeholder="自定义"/>
        </div>
        <div class="recharge_channels">
            <van-tabs v-model="active" animated>
                <van-tab title="一键支付">
                    <div class="recharge_channel_list">
                        <div class="recharge_channel_item">
                            <img :src="alipayIcon" alt="" class="logo">
                            <div class="message">
                                <div class="name">万能支付-支付宝一键支付</div>
                                <div class="desc">建议充值范围100.00元～49999.00元</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="快捷扫码">
                    <div class="recharge_channel_list">
                        <div class="recharge_channel_item" v-for="(recharge,index) in recharges" :key="index">
                            <img :src="recharge.src" alt="" class="logo">
                            <div class="message">
                                <div class="name">{{recharge.name}}</div>
                                <div class="desc">{{recharge.desc}}</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
  </div>
</template>

<script>
import backHeader from '../../components/backHeader'
export default {
  name: 'investMoney',
  components: {
    backHeader
  },
  data () {
    return {
      alipayIcon:require("../../assets/images/icon/alipay.png"),
      wechatIcon:require("../../assets/images/icon/wechat2.png"),
      moneyNumber: ['50', '100', '300', '500', '800', '1000', '2000'],
      active: 1,
      recharges:[
          {
            src:require("../../assets/images/icon/alipay.png"),
            name:"顺捷支付-支付宝一键支付",
            desc:"建议充值范围100.00元～5000.00元"
        },{
            src:require("../../assets/images/icon/alipay.png"),
            name:"易趣付H5-支付宝扫码支付",
            desc:"建议充值范围50.00元～10000.00元"
        },{
            src:require("../../assets/images/icon/alipay.png"),
            name:"蚂蚁T1-支付宝扫码支付",
            desc:"建议充值范围101.00元～10000.00元"
        },{
            src:require("../../assets/images/icon/alipay.png"),
            name:"易闪付-支付宝扫码支付",
            desc:"建议充值范围100.00元～10000.00元"
        },{
            src:require("../../assets/images/icon/wechat2.png"),
            name:"网付-微信扫码支付",
            desc:"建议充值范围100.00元～3000.00元"
        },{
            src:require("../../assets/images/icon/wechat2.png"),
            name:"MMPAY-微信扫码支付",
            desc:"建议充值范围501.00元～4999.00元"
        },{
            src:require("../../assets/images/icon/wechat2.png"),
            name:"随心付支付-微信扫码支付",
            desc:"建议充值范围500.00元～10000.00元"
        }
            
      ]
    }
  },
  methods: {
      goHome(){
          this.$router.push({name:'home'})
      }
  },
  created () {
  }
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
.recharge {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.centre-recharge, .centre-recharge .centre-recharge-userInfo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}
.centre-recharge .centre-recharge-userInfo {
    background-color: #fff;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 22px;
    font-size: 14px;
    color: #5b5b5b;
    position: relative;
}
.centre-recharge .centre-recharge-userInfo .go_to_home {
    position: absolute;
    top: 18px;
    left: 16px;
    width: 74px;
    border: 1px solid #ccc;
    border-radius: 100px;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
    padding: 6px 8px;
}
.centre-recharge .centre-recharge-userInfo .go_to_home .icon {
    width: 20px;
    margin-right: 4px;
}
.centre-recharge .centre-recharge-userInfo .wrap .name_wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-bottom: 8px;
}
.centre-recharge .centre-recharge-userInfo .wrap .name_wrap .icon {
    border: 0;
    height: 20px;
    margin-right: 7px;
    margin-top: -3px;
}
.centre-recharge .centre-recharge-userInfo .wrap .balance_wrap .icon {
    height: 20px;
    margin-right: 7px;
    margin-top: -4px;
}
.centre-recharge .centre-recharge-userInfo .wrap .name_wrap .name {
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.centre-recharge .centre-recharge-userInfo .wrap .balance_wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.centre-recharge .centre-recharge-userInfo .wrap .balance_wrap .balance {
    white-space: nowrap;
}
.centre-recharge-monchk {
    width: 368px;
    margin: 0 auto;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.centre-recharge-monitm.disabled {
    color: #a0a0a0;
    background-color: #d1d1d1;
    border: 1px solid #ccc;
}
.centre-recharge-monitm {
    font-size: 17px;
    background-color: #fff;
}
.centre-recharge-monchk .input, .centre-recharge-monitm {
    height: 38px;
    width: 85px;
    margin-bottom: 8px;
    color: #5b5b5b;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.recharge_channels .recharge_channel_list {
    background-color: #fff;
    -ms-flex: 1 1;
    flex: 1 1;
    overflow-y: scroll;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px;
}
.recharge_channels .recharge_channel_list .recharge_channel_item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #d3d3d3;
    padding: 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.recharge_channel_list .recharge_channel_item .logo {
    height: 48px;
    margin-right: 8px;
}
.recharge_channels .recharge_channel_list .recharge_channel_item .message {
    -ms-flex: 1 1;
    flex: 1 1;
}
.recharge_channels .recharge_channel_list .recharge_channel_item .message .name {
    color: #666;
    font-size: 14px;
    margin-bottom: 7px;
}
.recharge_channels .recharge_channel_list .recharge_channel_item .message .desc {
    color: #e8786f;
    font-size:12px;
}
</style>
